<template>
  <div class="announcement-detail-container">
    <el-page-header @back="goBack" content="公告详情" />

    <div class="announcement-content">
      <h2 class="title">公告标题：{{detail.messageTitle }}</h2>

      <div class="meta">
        <span>发布人: {{ detail.doctor.name }}</span>
        <span>发布时间: {{ formatDateTime(detail.publishTime).display }}</span>
      </div>

      <div class="content">
        公告内容：{{ detail.messageContent }}
      </div>
    </div>

    <div class="reply-section">
      <div class="reply-input">
        <el-input
            v-model="replyContent"
            type="textarea"
            :rows="3"
            placeholder="请输入回复内容"
        />
        <div class="actions">
          <el-button type="primary" @click="submitReply">提交回复</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, nextTick, watch} from 'vue';
import { useRoute, useRouter } from 'vue-router';

import axios from "axios";
import {formatDateTime} from "/src/utils/dateUtil.js";
import {ElMessage} from "element-plus";
//pinia使用
import { userStore } from '/src/components/store/index.js'
const userItemStore = userStore();

import {messageStore} from "@/components/store/message.js";
import request from "@/utils/request.js";
const messageItemStore = messageStore();



const route = useRoute();
const router = useRouter();

const detail = ref({
  id: null,
  messageTitle: '',
  messageContent: '',
  publishTime: '',
  roleId: null,
  role: { id: null, roleName: '' },
  doctor:{}
});

const replyContent = ref('');


const loadAnnouncementDetail = async () => {

    const resp = await request.get(`/announcement/getAnnById/${route.query.announcementId}`);
    detail.value = resp.data;
    //如果未读，标记已读
    if (route.query.readStatus==0) {
      // 数据库，标记为已读
      await request.put(`/annReceiver/markAsRead`, {
        announcementId: detail.value.id,
        receiverId: userItemStore.user.id
      });
      //pinia标记已读
      var index = messageItemStore.allAnnReceivers.findIndex(t=>t.id==route.query.id);

      messageItemStore.allAnnReceivers[index].readStatus = 1;
      messageItemStore.updateUnreadAnnReceivers();
    }
};


const submitReply = async () => {
  if (!replyContent.value.trim()) {
    ElMessage.warning('请输入回复内容');
    return;
  }

  try {
    //提交新公告
    // 直接构建请求数据，不依赖 replyAnn 对象
    const replyData = ref({
      messageTitle: route.query.messageTitle + "-" + "回复消息",
      messageContent: replyContent.value,
      doctorIdSend: userItemStore.user.id,
      receiverIds: [route.query.senderId],
      status: 0,
      createTime: new Date(),
      updateTime: new Date(),
      publishTime: new Date(),
      roleId: null
    });
    await request.post('/announcement/newAnnouncement', replyData.value).then(resp => {
      ElMessage.success(resp.data);
    });
    replyContent.value = '';

  } catch (error) {

    ElMessage.error('回复失败');
  }
};


const goBack = () => {
  router.go(-1);
};



onMounted( () => {
  loadAnnouncementDetail();
});


</script>

<style scoped>
.announcement-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.announcement-content {
  margin-top: 20px;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.meta {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.meta span {
  margin-right: 20px;
}

.content {
  line-height: 1.8;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  margin: 20px 0;
  color: #333;
  font-weight: 500;
}

.receiver-tag {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.receiver-tag .name {
  margin-left: 5px;
}

.reply-section {
  padding: 20px;
}

.reply-list {
  margin-bottom: 30px;
}

.reply-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.reply-content {
  flex: 1;
  margin-left: 15px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.reply-header .name {
  font-weight: 500;
}

.reply-header .time {
  color: #999;
  font-size: 13px;
}

.reply-text {
  line-height: 1.6;
}

.reply-input {
  margin-top: 30px;
}

.actions {
  margin-top: 15px;
  text-align: right;
}
</style>